<template>
  <div class="statistics">
    <div class="list">
      <div v-for="(item, index) in list" :key="index" class="item">
        <img :src="item.img" alt="">
        <div class="text-holder">
          <div class="count">{{ item.count }}</div>
          <div class="unit">{{ item.unit }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          img: require('../../../assets/png/1.png'),
          count: '85.6',
          unit: '订单总数 (万)'
        },
        {
          img: require('../../../assets/png/2.png'),
          count: '32.5',
          unit: '销售总量 (万元)'
        },
        {
          img: require('../../../assets/png/3.png'),
          count: '92.6',
          unit: '人均消费'
        },
        {
          img: require('../../../assets/png/4.png'),
          count: '45',
          unit: '近十分钟新增订单数量'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics {
  .list {
    .item {
      box-sizing: border-box;
      padding: 5px;
      float: left;
      width: 50%;
      display: flex;
      align-items: center;
      img {
        width: 43px;
        height: 43px;
      }

      .text-holder {
        padding-left: 15px;
        .count {
          font-family: Microsoft Yahei;
          font-size: 32px;
          font-weight: 700;
          color: #fff;
        }

        .unit {
          margin-top: 4px;
          font-family: Microsoft Yahei;
          font-size: 12px;
          color: #b0c2f9;
        }
      }
    }
  }
}
</style>
